<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-input v-model="searchData.name" placeholder="填写预约人" size="small" class="w-200 mr-10"></el-input>
          <el-select v-model="searchData.style" placeholder="预约类型" size="small" class="mr-10 w-140">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in styleList"
                       :key="index"></el-option>
          </el-select>
<!--          <el-select v-model="searchData.style" placeholder="审核状态" size="small" class="mr-10 w-140">-->
<!--            <el-option :label="item.name" :value="item.id" v-for="(item, index) in statusList"-->
<!--                       :key="index"></el-option>-->
<!--          </el-select>-->
          <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
        </div>
        <p class="numberline toplineBox-right">总{{ page.total }}条</p>
      </div>
      <!--      <p class="mb-10">请访客关注本园公众号服务号，进行预约申请</p>-->
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <!--            <el-table-column-->
            <!--                prop="id"-->
            <!--                label="ID"-->
            <!--                width="90">-->
            <!--            </el-table-column>-->
            <el-table-column
                prop="create_time"
                label="申请时间" width="170">
            </el-table-column>
            <el-table-column
                prop="day"
                label="预约时间"
                width="100">
            </el-table-column>
            <el-table-column
                label="预约类型"
                width="90">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.style==1" size="mini" type="warning">家长陪餐</el-tag>
                <el-tag v-else size="mini" type="success">普通访客</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                label="预约人"
                prop="name">
            </el-table-column>
            <el-table-column
                label="预约人电话"
                min-width="100"
                :show-overflow-tooltip="true"
                prop="mobile_phone">
            </el-table-column>
            <el-table-column
                min-width="100"
                label="预约人车牌">
              <template slot-scope="scope">
                {{ scope.row.license_plate ? scope.row.license_plate : '' }}
              </template>
            </el-table-column>
            <el-table-column
                label="身体状况"
                prop="health_code">
            </el-table-column>
            <el-table-column
                prop="id_number"
                :show-overflow-tooltip="true"
                min-width="100"
                label="身份证号">
            </el-table-column>
            <el-table-column
                label="预约老师">
              <template slot-scope="scope">
                {{ scope.row.users.realname }}
              </template>
            </el-table-column>
            <el-table-column
                prop="content"
                label="到访事由">
            </el-table-column>
            <el-table-column
                label="操作"
                width="220"
                fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" @click="checkApply(1,scope.$index)" type="primary" plain>通过</el-button>
                <el-button size="mini" @click="checkApply(2,scope.$index)" plain>驳回</el-button>
                <el-button type="danger" size="mini" @click="handleDetel(scope.$index)" plain>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <div style="position: fixed;top: -9999px">
      <viewer :images="studentPhoto" class="descimgBox">
        <img :src="studentPhoto[0]" class="viewerImg" ref="imgPrive">
      </viewer>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import {mapGetters} from "vuex";

export default {
  components: {},
  data() {
    return {
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      studentPhoto: [],
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      // status 0未审核1通过2驳回
      searchData: {
        name: '',
        mobile_phone: '',
        start_time: '',
        end_time: '',
        type: 0,
        style: 99,
        p: 1
      },
      styleList: [
        {
          id: 99,
          name: '全部'
        },
        {
          id: 0,
          name: '普通访客'
        },
        {
          id: 1,
          name: '家长陪餐'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let data_ = JSON.parse(JSON.stringify(this.searchData))
      data_.p = this.page.pageindex
      if (Number(data_.style) === 99) {
        delete data_.style
      }
      this.$fetch(this.api.visitor.visit_apply, data_).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    searchFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.searchData.name = '';
      this.searchData.style = 99;
      this.page.pageindex = 1;
      this.InitFn()
    },
    checkApply(type, index) {
      if (type === 1) {
        this.$confirm('确认同意预约申请进入校园, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.detelRespon(type, index)
        }).catch(() => {
        })
      } else {
        this.$prompt('请填写驳回理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          if (value) {
            console.log('填写得内容时：', value)
            this.detelRespon(type, index, value)
          } else {
            this.$message.error('未填写驳回理由')
          }
        }).catch(() => {
        })
      }
    },
    detelRespon(type, index, value) {
      // visit_adopt 通过
      // visit_reject 驳回
      let url_ = this.api.visitor.visit_adopt
      let data_ = {id: this.arryList[index].id}
      if (type === 2) {
        // 驳回
        url_ = this.api.visitor.visit_reject
        data_.reason = value
      }
      this.$post(url_, data_).then((response) => {
        if (response.code === 0) {
          this.$message({
            message: '操作成功！',
            type: 'success'
          })
          this.arryList.splice(index, 1)
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    viewImgDShow(path) {
      this.$set(this.studentPhoto, 0, path)
      setTimeout(() => {
        this.$refs.imgPrive.click()
      }, 100)
      // this.imgsrcCheck = path
      // this.dialogImgVisible = true
    },
    handleDetel(index) {
      let self_ = this
      this.$confirm('此访客记录将永久删除，确认删除此访客记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self_.$post(this.api.visitor.visit_delete, {
          id: this.arryList[index].id
        }).then((response) => {
          if (response.code === 0) {
            this.arryList.splice(index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {

      })
    }
  },
  mounted() {
  },
  // 缓存机制 star
  beforeRouteEnter(to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
  // 缓存机制 end
}
</script>
